<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="450" height="320" style="border:1px solid #d3d3d3;"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    // Define parameters
    let centerX = 120;
    let centerY = 130;
    let radius = 70;
    let pX = 330;
    let pY = centerY;
    let dimLineY = 220;

    // --- Draw the Sphere ---
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.stroke();

    // --- Draw the Radius Line and Label ---
    // Calculate the end point of the radius line (at 135 degrees)
    let angle = 135 * Math.PI / 180;
    let radiusEndX = centerX + radius * Math.cos(angle);
    let radiusEndY = centerY + radius * Math.sin(angle);

    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(radiusEndX, radiusEndY);
    ctx.stroke();

    ctx.font = "18px Arial";
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.fillText("0.15 m", centerX - 45, centerY - 45);

    // --- Draw Point P ---
    ctx.beginPath();
    ctx.arc(pX, pY, 3, 0, 2 * Math.PI);
    ctx.fill();
    ctx.textAlign = 'left';
    ctx.fillText("P", pX - 5, pY - 8);

    // --- Draw Dashed Lines ---
    ctx.save();
    ctx.setLineDash([5, 5]);
    ctx.lineWidth = 1;

    // Horizontal dashed line from center to P
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(pX, pY);
    ctx.stroke();

    // Vertical dashed line from center
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(centerX, dimLineY);
    ctx.stroke();

    // Vertical dashed line from P
    ctx.beginPath();
    ctx.moveTo(pX, pY);
    ctx.lineTo(pX, dimLineY);
    ctx.stroke();
    
    ctx.restore(); // Restore to solid lines

    // --- Draw Dimension Line 'x' ---
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    // Horizontal line
    ctx.moveTo(centerX, dimLineY);
    ctx.lineTo(pX, dimLineY);
    // Left arrowhead
    ctx.moveTo(centerX + 8, dimLineY - 5);
    ctx.lineTo(centerX, dimLineY);
    ctx.lineTo(centerX + 8, dimLineY + 5);
    // Right arrowhead
    ctx.moveTo(pX - 8, dimLineY - 5);
    ctx.lineTo(pX, dimLineY);
    ctx.lineTo(pX - 8, dimLineY + 5);
    ctx.stroke();

    // Label for x
    ctx.textAlign = 'center';
    ctx.fillText("x", (centerX + pX) / 2, dimLineY - 5);

    // --- Draw Figure Label ---
    ctx.font = "bold 20px Arial";
    ctx.fillText("Fig. 5.1", (centerX + pX) / 2, dimLineY + 60);

</script>
</body>
</html>